<template>
	<view class="wapper">
		<u-navbar :autoBack="true" :fixed="false" :titleStyle="{ color: '#000' }" bgColor="#fff" title="添加物资"></u-navbar>
		<search @search="search" />
		<scroll-view style="height:calc(100vh - 200rpx)" scroll-y="true" @scrolltolower="loadmore">
			<view class="list-list">
				<template v-if="list && list.length>0">

					<view class="list">
						<view class="item" v-for="(item ,index) in list" :key="index">
							<view class="left">
								<view class="border" @click="changeItem(item.check,index)">
									<view class="noCheck" v-if="!item.check"></view>
									<u-icon name="checkmark-circle" size="36rpx" color="#407FFF" class="check" v-else>
									</u-icon>
								</view>
								<view class="text">
									<view class="name">
										{{item.materialName}}
									</view>
									<view class="title">
										{{item.categoryName}}
									</view>
								</view>
							</view>
							<view class="right">
								{{item.model}}
							</view>
						</view>
					</view>

					<u-loadmore :status="status" />
				</template>

				<template v-else>
					<u-empty v-if="params.materialName" text="暂无搜索结果" width="320rpx" height="320rpx"
						icon="../../static/image/list-no-data.png" class="nodata"></u-empty>
					<u-empty v-else text="暂无数据" width="320rpx" height="320rpx"
						icon="../../static/image/chart-no-data.png" class="nodata"></u-empty>

				</template>

			</view>

			<view class="footer">
				<view class="btn-left" @click="backPre">取消</view>
				<view class="btn-right" @click="close">确认</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		getMaterialList
	} from '@/api/maintain.js'
	import search from '@/components/search/index.vue'
	export default {
		components: {
			search
		},
		filters: {

		},
		data() {
			return {
				status: 'loadmore',
				list: [],
				params: {
					materialName: '',
					pageNum: 1,
					pageSize: 10,
					filterType: ''
				},
				total: 0,

			}
		},
		onLoad(option) {
			this.params.filterType = option.filterType || ''
		},
		onShow() {
			this.list = []
			this.getList()
		},
		created() {

		},

		methods: {
			backPre() {
				uni.navigateBack({
					delta: 1
				})
			},
			close() {
				let newArr = this.list.filter(item => item.check)
				if (newArr.length > 0) {
					var pages = getCurrentPages()
					var prevPage = pages[pages.length - 2]
					if (prevPage) {
						prevPage.$vm.changeProject(newArr) // 重点$vm 给上一页 
						uni.navigateBack()
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '至少选择一个',
						duration: 3000,
					})
					return
				}

				// this.$emit('closeFix', str, this.checkboxValue1)
			},
			changeItem(flag, index) {
				let item = this.list[index] // 
				item.check = !flag
				this.$set(this.list, index, item)
			},

			loadmore() {

				if (this.list.length >= this.total) {
					this.status = 'nomore'
					return
				}
				this.params.pageNum = this.params.pageNum + 1
				this.getList()
			},
			search(keyword) {
				this.params.materialName = keyword
				this.params.pageNum = 1
				this.list = []
				this.getList()
			},
			getList() {
				this.status = 'loading';
				uni.showLoading({
					title: '加载中'
				})
				getMaterialList(this.params).then(res => {

					const {
						total,
						rows
					} = res
					if (rows && rows.length > 0) {
						rows.map((item) => {
							item.check = false
						})
						this.list = [...this.list, ...rows]
					}
					this.total = total
					if (total === 0 || this.list.length === this.total) {
						this.status = 'nomore'
					}

				}).finally(() => {
					uni.hideLoading()
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wapper {
		width: 100vw;
		min-height: 100vh;
		background: #F5F7F9;

		.footer {
			width: 686rpx;
			height: 104rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			background: #fff;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			border-top: 2rpx solid #F5F7F9;
			padding: 30rpx 32rpx 10rpx 32rpx;

			.btn-right {
				background: #407FFF;
				border-radius: 52rpx;
				height: 104rpx;
				width: 45%;
				font-size: 36rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn-left {
				background: #fff;
				border-radius: 52rpx;
				height: 104rpx;
				width: 45%;
				font-size: 36rpx;
				font-weight: 400;
				color: #FFFFFF;
				border: 1rpx solid #407FFF;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: center;
			}




		}

		.list-list {
			padding-bottom: 160rpx;
		}

		.list {
			width: 100vw;


			.item {
				margin-top: 10rpx;
				background: #fff;
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;

					.border {
						width: 40rpx;
						margin-right: 20rpx;
						height: 30rpx;

						.noCheck {
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							border: 1rpx solid #407FFF;
						}
					}

					.title {
						font-size: 26rpx;
						font-weight: 400;
						color: #909399;
					}

					.name {
						font-size: 32rpx;
						font-weight: 500;
					}
				}

				.right {
					font-size: 26rpx;
					font-weight: 400;
					color: #909399;
				}

			}
		}


	}
</style>
